<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"
  th:with="webConfig=${@configTag.getConfigValueMap(themeName)}">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
  <meta name="author" content="grace" />
  <title th:text="${webConfig['oly.web.title']+'-登录'}"></title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="copyright" th:content="${webConfig['oly.web.copyright']}">
  <meta name="keywords" th:content="${webConfig['oly.web.keywords']+',用户登录'}">
  <meta name="description" th:content="${webConfig['oly.web.description']+',用户登录'}">
  <link rel="shortcut icon" type="image/x-icon"
    th:href="${#strings.isEmpty(webConfig['oly.web.ico'])?'/static/libs/light/favicon.ico':webConfig['oly.web.ico']}">
  <link rel="icon"
    th:href="${#strings.isEmpty(webConfig['oly.web.ico'])?'/static/libs/light/favicon.ico':webConfig['oly.web.ico']}">
  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <link rel="stylesheet" type="text/css" th:href="@{/static/libs/light/css/materialdesignicons.min.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/static/libs/light/css/bootstrap.min.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/static/libs/light/css/animate.min.css}" />
  <link rel="stylesheet" type="text/css" th:href="@{/static/libs/light/css/style.min.css}" />
  <style>
    .signin-form .has-feedback {
      position: relative;
    }

    .signin-form .has-feedback .form-control {
      padding-left: 36px;
    }

    .signin-form .has-feedback .mdi {
      position: absolute;
      top: 0;
      left: 0;
      right: auto;
      width: 36px;
      height: 36px;
      line-height: 36px;
      z-index: 4;
      color: #dcdcdc;
      display: block;
      text-align: center;
      pointer-events: none;
    }

    .signin-form .has-feedback.row .mdi {
      left: 15px;
    }
  </style>
</head>

<body class="center-vh" th:style="'background-image:url('+${#strings.isEmpty(webConfig['oly.web.hand.back'])?'/static/libs/light/images/login-bg-2.jpg':blogConfig['oly.web.hand.back']}+');background-size: cover;'" >
  <div class="card card-shadowed p-5 mb-0 mr-2 ml-2">
    <div class="text-center mb-3">
      <a th:href="${webConfig['oly.web.domain']}">
        <img style="width:210px;height:36px" th:alt="${webConfig['oly.web.title']}" th:src="${#strings.isEmpty(webConfig['oly.web.hand.logo'])?'/static/libs/light/images/logo-sidebar.png':blogConfig['oly.web.hand.logo']}" />
      </a>
    </div>

    <form id="loginForm" class="signin-form needs-validation" novalidate>
      <div class="mb-3 has-feedback">
        <span class="mdi mdi-account" aria-hidden="true"></span>
        <input type="text" class="form-control" name="username" id="username" placeholder="用户名" required />
      </div>

      <div class="mb-3 has-feedback">
        <span class="mdi mdi-lock" aria-hidden="true"></span>
        <input type="password" class="form-control" name="password" id="password" placeholder="密码" required />
      </div>

      <div class="mb-3 has-feedback row">
        <div class="col-7">
          <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
          <input type="text" name="code" id="code" class="form-control" placeholder="验证码" required />
          <input type="hidden" name="uuid" id="uuid" />
        </div>
        <div class="col-5 text-right">
          <img class="pull-right" id="captcha" style="cursor: pointer; height: 38px;display: none;"
            onclick="getCaptchaImage()" title="点击刷新" alt="captcha" />
        </div>
      </div>

      <div class="mb-3">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" name="remember-me" value="true" id="rememberme" />
          <label class="form-check-label not-user-select" for="rememberme">5天内自动登录</label>
        </div>
      </div>
      <div class="mb-3 d-grid">
        <button class="btn btn-primary" type="button">立即登录</button>
      </div>
    </form>

    <p class="text-center text-muted mb-0">
      Copyright © 2024
      <a target="_blank" th:href="${webConfig['oly.web.domain']}" th:text="${themeName}">笔下光年</a>.
      All right reserved
    </p>

    <input type="hidden" id="forward" th:value="${forward}">
    <input type="hidden" id="themeName" th:value="${themeName}">
    <input type="hidden" id="domain" th:value="${@configTag.getKey(themeName,'oly.web.domain')}">

  </div>

  <script type="text/javascript" th:src="@{/static/libs/light/js/jquery.min.js}"></script>
  <script type="text/javascript" th:src="@{/static/libs/light/js/popper.min.js}"></script>
  <script type="text/javascript" th:src="@{/static/libs/light/js/bootstrap.min.js}"></script>
  <script type="text/javascript" th:src="@{/static/libs/light/js/lyear-loading.js}"></script>
  <script type="text/javascript" th:src="@{/static/libs/light/js/bootstrap-notify.min.js}"></script>
  <script type="text/javascript">
    var loader;
    function login() {
      $("button").html("登录中...").attr("disabled", true);
      loader = $("button").lyearloading({
        opacity: 0.2,
        spinnerSize: "nm",
      });
      $.ajax({
        async: true,
        url:
          $("#domain").val() + "/doLogin?username=" +
          $("#username").val() +
          "&password=" +
          $("#password").val() +
          "&remember-me=" +
          $("#rememberme").is(":checked") +
          "&code=" +
          $("#code").val() +
          "&uuid=" +
          $("#uuid").val() +
          "&forward=" +
          $("#forward").val(),
        type: "POST",
        contentType: 'application/json',
        timeout: 30000,
        success: function (res) {
          res = JSON.parse(res);
          if (res.code === 200) {
            $.notify(
              {
                message: "登录成功，页面即将跳转~",
              },
              {
                type: "success",
                placement: {
                  from: "top",
                  align: "right",
                },
                z_index: 10800,
                delay: 1500,
                animate: {
                  enter: "animate__animated animate__fadeInUp",
                  exit: "animate__animated animate__fadeOutDown",
                },
              }
            );
            setTimeout(function () {
              location.href = $("#domain").val() + $("#forward").val();
            }, 1500);
          } else {
            $.notify(
              {
                message: "登录失败，错误原因：" + res.msg,
              },
              {
                type: "danger",
                placement: {
                  from: "top",
                  align: "right",
                },
                z_index: 10800,
                delay: 1500,
                animate: {
                  enter: "animate__animated animate__shakeX",
                  exit: "animate__animated animate__fadeOutDown",
                },
              }
            );
            $("#captcha").click();
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          $.notify(
            {
              message: "服务器错误",
            },
            {
              type: "danger",
              placement: {
                from: "top",
                align: "right",
              },
              z_index: 10800,
              delay: 1500,
              animate: {
                enter: "animate__animated animate__shakeX",
                exit: "animate__animated animate__fadeOutDown",
              },
            }
          );
        },
        complete: function () {
          loader.destroy();
          $("button").html("立即登录").attr("disabled", false);
        },

      });
    }

    function getCaptchaImage() {
      $.get($("#domain").val() + "/code/captchaImage", function (res, status) {
        document.getElementById("captcha").src =
          "data:image/gif;base64," + res.img;
        $("#captcha").show();
        document.querySelector("input[name='uuid']").value = res.uuid;
      });
    }

    getCaptchaImage();

    $("button").click(function (event) {
      if ($("form")[0].checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
        $("#loginForm").addClass('was-validated');
      }
      else {
        login();
      }

    });
  </script>
</body>

</html>